<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="font/font_d9s7csr2qh/iconfont.css">
    <link rel="stylesheet" href="font/font_ic2aueah3c/iconfont.css">
    <link rel="stylesheet" href="css/cart.css">
    <title>购物车</title>
</head>

<body>
    <div class="wraptop">
        <div>
            <ul>
                <li><a class="lw">中关村在线</a></li>
                <li><a>ZOL企业购</a></li>
                <li><a>解决方案馆</a></li>
                <li><a>中在指数</a></li>
                <li><a class="lm">供应商入驻</a></li>
            </ul>
            <ul id="lore">
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html" class="lm">注册</a></li>
            </ul>

        </div>
    </div>
    <div class="top">
        <div><img src="img/logo.png" alt=""></div>
        <div class="search">
            <div class="sea1"><i class="iconfont icon-sousuo"></i><input type="text" placeholder="找找你想要的商品"><span>搜 索</span>
            </div>
            <ul class="jig">
                <li>
                    <a href="">激光打印机</a>
                </li>
                <li>
                    <a href="">商用显示</a>
                </li>
                <li>
                    <a href="">投影机</a>
                </li>
                <li>
                    <a href="">复印机</a>
                </li>
                <li>
                    <a href="">硒鼓</a>
                </li>
                <li>
                    <a href="" class="la">墨盒</a>
                </li>
            </ul>
        </div>
        <div class="che">
            <p id="gche">0</p>
            <i class="iconfont icon-gouwuche"><a href=""></a></i>
            <span>我的购物车</span>
        </div>
        <div class="t-t"><img src="img/top.png" alt=""></div>
    </div>

    <div class="cartbox">
        <h1>全部商品</h1>
        <div class="cart-con">
            <div class="cart-title">
                <span>商品信息</span><span>单价</span><span>数量</span><span>金额</span><span>操作</span>
            </div>
            <div id="box">
                <!-- <div class="pbox">
                <div class="cimg"><img src="img/06.jpg" alt=""></div>
                <div class="cname">
                    <p>联想ThinkCentre M920t(i7 9700/8GB/256GB+1TB/DVDRW/2G独显/W10H)</p>
                    <p>联想ThinkCentre M920t(i7 9700/8GB/256GB+1TB/DVDRW/2G独显/W10H)</p>
                </div>
                <span class="cprice">1680.00</span>
                <div class="count">
                    <p class="jian">-</p>
                    <input type="text" class="num">
                    <p class="jia">+</p>
                </div>
                <span class="cjer">

                </span>
                <span class="cdel">删除</span>
            </div> -->
            </div>

        </div>

    </div>
    <div class="csubwrap">
        <div class="csub">
            <div class="sub">
                <div>已选择<span id="type">0</span>种商品&nbsp;&nbsp;&nbsp;</div>
                <div>合计 (不含运费) : <span class="tit">0.00</span></div>
                <button>去结算</button>
            </div>
        </div>
    </div>

    <div class="footer">
        <div>
            <div><img src="img/下载.png" alt=""><span>热线电话</span><span>400-688-1999</span></div>
            <p>©2021 北京知行锐景科技有限公司 / 北京中在云商科技有限公司 版权备案单位/子公司</p>
            <p>京ICP证150096号 &nbsp;&nbsp;&nbsp;京ICP备14061128号&nbsp;&nbsp;&nbsp; 京公网安备11010802020026号&nbsp;&nbsp;&nbsp; 网络文化经营许可证京网文[2016]1631-199 &nbsp;&nbsp;&nbsp;增值电信业务经营许可证：京B2-20200543</p>

        </div>
        <div class="erwei"><img src="img/code.53fecea8.png" alt=""></div>
        <script>
            $(".tit").text(JSON.parse(localStorage.getItem("tit")))
            var pid = location.search.split("=")[1];
            console.log(pid)
            var uid = JSON.parse(localStorage.getItem("id"));
            var user = JSON.parse(localStorage.getItem("ursername"));
            console.log(uid);

            console.log(pid);
            $("#lore").html("<li>欢迎您,&nbsp;&nbsp;" + user + "&nbsp;<button>[退出]</button></li>")
            let tx = "<img src='img/huge.jpg'><a>欢迎回来</a>"
            $("#touxiang").html(tx);
            if (user == undefined) {
                let str = '<li><a href="login.html">登录</a></li><li><a href="register.html" class="lm">注册</a></li>'
                $("#lore").html(str);
                let tx = "<img src='img/zoler.jpg'><a href='login.html'>点击我就可以登录哟</a>"
                $("#touxiang").html(tx)
            }
            $("#lore button").click(function() {
                location.href = "index.html";
            });
            var jian = document.querySelector(".jian");
            var jia = document.querySelector(".jia");
            var num = document.querySelector(".num");

            $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
                id: uid
            }).then(res => {
                console.log(res.data);
                let arr = res.data;
                let str = "";
                arr.forEach(items => {
                    let all = items.pprice * items.pnum
                    str += `<div class="pbox"  data-id="${items.pid}">
                    <div class="cimg"><img src="${items.pimg}" alt=""></div>
                    <div class="cname">
                        <p>${items.pname}</p>
                        <p>${items.pname}</p>
                    </div>
                    <span class="cprice">￥${items.pprice}</span>
                    <div class="count">
                        <p class="jian">-</p>
                        <input type="text" class="num" value="${items.pnum}">
                        <p class="jia">+</p>
                    </div>
                    <span class="cjer">
                        ${all}
                    </span>
                    <span class="cdel">删除</span>
                    </div>`
                })
                $("#box").html(str);
                let pprice = document.querySelectorAll(".cjer")
                let pnum = document.querySelectorAll(".num")
                let jia = document.querySelectorAll(".jia");
                let jian = document.querySelectorAll(".jian");
                let tit = document.querySelector(".tit");
                let type = document.querySelector("#type");
                let gche = document.querySelector("#gche");

                function getSum() {
                    let title = 0;
                    for (let i = 0; i < pprice.length; i++) {
                        title += parseInt(pprice[i].innerText);
                    }
                    tit.innerText = title;
                    console.log(title)
                    return title;
                    tit.innerText = title;
                }
                getSum();
                // console.log(($(".ce")))
                function num() {
                    var num = 0;
                    for (var i = 0; i < pnum.length; i++) {
                        num += Number(pnum[i].value)
                            // console.log(Number(pnum[i].value))
                    }

                    console.log(num)
                    return (num);
                }
                num();
                type.innerText = num();
                gche.innerText = num();
                localStorage.setItem("che", JSON.stringify(num()));
                let count = 0;
                console.log(pprice.length);


                $(".cdel").click(function() {
                    $(this).parent().remove();
                    $.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
                        uid: uid,
                        pid: $(this).parent(".pbox").attr("data-id")
                    }).then(res => {
                        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
                            id: uid
                        }).then(res => {
                            getSum();
                            let title = 0;
                            let num = 0;
                            for (let i = 0; i < res.data.length; i++) {
                                title += parseInt(res.data[i].pprice);
                                num += parseInt(res.data[i].pnum);
                            }
                            tit.innerText = title;
                            type.innerText = num;
                            gche.innerText = num;
                            // location.reload();
                        })
                    })

                })



                for (let i = 0; i < pprice.length; i++) {

                    jia[i].onclick = function() {
                        localStorage.setItem("che", JSON.stringify(num()));
                        let count = 0;
                        pnum[i].value++;
                        $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                            pid: $(".pbox").eq(i).attr("data-id"),
                            uid: uid,
                            pnum: pnum[i].value
                        }).then(res => {
                            $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
                                id: uid
                            }).then(res => {
                                num();
                                type.innerText = num();
                                gche.innerText = num();
                                for (let i = 0; i < pprice.length; i++) {
                                    pprice[i].innerHTML = parseInt(res.data[i].pprice) * parseInt(res.data[i].pnum)
                                    count += parseInt(res.data[i].pprice) * parseInt(res.data[i].pnum)

                                }
                                localStorage.setItem("tit", JSON.stringify(count))
                                console.log(count)
                                tit.innerText = count;
                            })
                        })
                    }

                };

                for (let i = 0; i < pprice.length; i++) {
                    jian[i].onclick = function() {
                        localStorage.setItem("che", JSON.stringify(num()));
                        let count = 0;
                        if (pnum[i].value <= 1) {
                            pnum[i].value = 1
                        } else {
                            pnum[i].value--;
                        }
                        $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                                pid: $(".pbox").eq(i).attr("data-id"),
                                uid: uid,
                                pnum: pnum[i].value
                            })
                            .then(res => {
                                $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
                                        id: uid
                                    })
                                    .then(res => {
                                        for (let i = 0; i < pprice.length; i++) {
                                            pprice[i].innerText = parseInt(res.data[i].pprice) * parseInt(res.data[i].pnum);
                                            count += parseInt(res.data[i].pprice) * parseInt(res.data[i].pnum)
                                            console.log(count)
                                            localStorage.setItem("tit", JSON.stringify(count))
                                            num();
                                            type.innerText = num();
                                            gche.innerText = num();
                                        }
                                        tit.innerText = count;
                                    })
                            })
                    }
                }


            });
        </script>
</body>

</html>